<template>
  <view class="wrap">
    <view class="banner-box">
      <kevy-swiper
        :list="bannerList"
        :width="684"
        :height="480"
        :autoPlay="false"
        :autoPlayInterval="5000"
        :showDot="true"
        :descAniType="'slideFromRight'"
        :dotColor="'#E5E6EB'"
        :dotSelectedColor="'#00D1B6'"
      />
    </view>
    <view class="tabs">
      <view :class="['tab-item', mousicType == 'music' ? 'active' : '']" @tap="tabChange('music')">
        <text class="name">音乐</text>
        <view class="tab_active" v-if="mousicType == 'music'" />
      </view>
      <view
        :class="['tab-item', mousicType == 'whiteNoise' ? 'active' : '']"
        @tap="tabChange('whiteNoise')"
      >
        <text class="name">白噪声</text>
        <view class="tab_active" v-if="mousicType == 'whiteNoise'" />
      </view>
    </view>
    <view class="mousic-box">
      <view class="mousic-item">
        <view
          class="mousic-item-grid"
          @tap="musicHandle(item)"
          v-for="(item, index) in mousicList"
          :key="index"
        >
          <image class="mousic-image" :src="item.imageUrl" mode="scaleToFill" />
          <text class="music-name">{{ item.fileName }}</text>
          <image class="play-icon" src="https://ainengli.hzjrsw.com/jkhx/common/play.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getMusicList } from './music.api'

import type { mousicData, mousicListData } from '../sleepModel'
import KevySwiper from '@/module/src/components/kevy-swiper.vue'

const bannerList = reactive([
  {
    pageUrl: `/module/src/pages/sleep/relax/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner1.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/breatheHelpsSleep/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner2.png`
  },
  {
    pageUrl: `/module/src/pages/sleep/sleepAssessment/index`,
    imgUrl: `https://ainengli.hzjrsw.com/jkhx/weight/banner4.png`
  }
])

const orginMusicData = ref<any>([])
const mousicList = ref<mousicListData[]>([])

const musicImgIndex = ref<number>(0)

const mousicType = ref<string>('music') // mousic: 音乐  whiteNoise：白噪声

onShow(() => {
  mousicList.value = []
  getMusicData()
})

const tabChange = (type: string) => {
  mousicType.value = type
  mousicList.value = []
  const datas: any = []
  orginMusicData.value.map((item: mousicData) => {
    const extMap = item.extMap

    if (extMap) {
      const newExtMap = JSON.parse(extMap)
      if (newExtMap.soundType === mousicType.value) {
        datas.push({
          fileSource: item.fileSource,
          fileUrl: item.fileUrl,
          imageUrl: '',
          fileName: newExtMap.fileName,
          soundType: newExtMap.soundType
        })
      }
    }
  })

  mousicList.value = datas.map((vo, index) => {
    const num = index + 1 > 12 ? index + 1 - 12 : index + 1
    return {
      ...vo,
      imageUrl:
        mousicType.value === 'music'
          ? `https://ainengli.hzjrsw.com/jkhx/weight/music-img/music${num >= 10 ? num : '0' + num}.png`
          : `https://ainengli.hzjrsw.com/jkhx/weight/white-noise/image${num >= 10 ? num : '0' + num}.png`
    }
  })
}

const getMusicData = () => {
  mousicList.value = []
  getMusicList('WEIGHT_LOSE_SLEEP_MUSIC').then((res: any) => {
    // mousicList.value = res.data
    orginMusicData.value = res.data

    const datas: any = []
    orginMusicData.value.map((item: mousicData) => {
      const extMap = item.extMap

      if (extMap) {
        const newExtMap = JSON.parse(extMap)
        if (newExtMap.soundType === mousicType.value) {
          datas.push({
            fileSource: item.fileSource,
            fileUrl: item.fileUrl,
            imageUrl: '',
            fileName: newExtMap.fileName,
            soundType: newExtMap.soundType
          })
        }
      }
    })

    mousicList.value = datas.map((vo, index) => {
      const num = index + 1 > 12 ? index + 1 - 12 : index + 1
      return {
        ...vo,
        imageUrl:
          mousicType.value === 'music'
            ? `https://ainengli.hzjrsw.com/jkhx/weight/music-img/music${num >= 10 ? num : '0' + num}.png`
            : `https://ainengli.hzjrsw.com/jkhx/weight/white-noise/image${num >= 10 ? num : '0' + num}.png`
      }
    })
  })
}

const musicHandle = (data: mousicListData) => {
  const url = encodeURIComponent(data.fileUrl)
  const list = encodeURIComponent(JSON.stringify(mousicList.value))
  uni.navigateTo({
    url: `/module/src/pages/sleep/music/player?audioUrl=${url}&type=${mousicType.value}&list=${list}&name=${data.fileName}`
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  background-color: #fff;
}

.banner-box {
  width: 100%;
  height: 546rpx;
  padding: 32rpx;
  margin-bottom: 26rpx;
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 84rpx;
  // background-color: red;

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0 32rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #666;

    .name {
      display: inline-block;
      height: 40rpx;
      margin-top: 22rpx;
    }
  }

  .active {
    font-size: 36rpx;
    font-weight: 700;
    color: #222;

    .name {
      display: inline-block;
      height: 50rpx;
      margin-top: 16rpx;
    }
  }

  .tab_active {
    width: 24rpx;
    height: 6rpx;
    margin-top: 12rpx;
    background: #00d1b6;
    border-radius: 4rpx;
  }
}

.mousic-box {
  padding: 32rpx 22rpx;
}

.mousic-image {
  width: 200rpx;
  height: 200rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #222;
}

.music-name {
  display: -webkit-box;
  width: 192rpx;
  height: 40rpx;
  margin-top: 10rpx;
  overflow: hidden;
  font-size: 28rpx;
  font-weight: 700;
  color: #222;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-all;
  -webkit-box-orient: vertical;
}

.mousic-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;

  .mousic-item-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .play-icon {
    position: absolute;
    right: 24rpx;
    bottom: 66rpx;
    z-index: 10;
    width: 46rpx;
    height: 46rpx;
  }
}
</style>
